import React, { Component } from 'react'
import { NavBar, Icon, Tabs, Progress, List } from 'antd-mobile';
import ReactEcharts from 'echarts-for-react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';
import './history.scss'
const Item = List.Item;
const tabs = [
  { title: '我的' },
  { title: '日统计' },
  { title: '月统计' },
];
let option = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      labelLine: {
        show: false
      },
      color : [ '#6cb6ff', '#f9df71', '#f89ad8', '#a8a0f5', '#87db7d'],
      data: [
        { value: 21, name: '正常',},
        { value: 6, name: '迟到' },
        { value: 2, name: '未到' },
        { value: 1, name: '请假' },
        { value: 4, name: '加班'}
      ]
    }
  ]
};
export default class index extends Component {
  // state = {
  //   en: false,
  //   show: false,
  //   config: {},
  // };
  render() {
    return (
      <div className="signin_history_box">
        <div className="signin_history_header">
          <NavBar
            mode="light"
            icon={<Icon type="left"/>}
            onLeftClick={() => {this.props.history.goBack()}}
          >签到历史</NavBar>
        </div>
        <div className="signin_history_content content">
          <Tabs 
            tabs={tabs} 
            initialPage={0} 
            animated={false} 
            useOnPan={false}
            tabBarUnderlineStyle={{
              // width: '14%',
              height: '0.04rem',
            }}
          >
            {/* 我的 */}
            <div className="my_signin" style={{ backgroundColor: '#fff'}}>
              <Calendar />
              <div className="signin_type">
                <div className="signin_normal">正常<span>20</span></div>
                <div className="signin_late">缺勤<span>1</span></div>
                <div className="signin_leave">请假<span>1</span></div>
              </div>
              <div className="signin_num_box">本月出勤<span>20</span>天</div>
              <div className="signin_record">
                <div className="record">
                  <div className="record_info">
                    <div className="record_time">
                      <div className="specific_time">9:00</div>
                      <div className="date">04-24</div>
                    </div>
                    <div className="circular"></div>
                    <div className="record_type">上班</div>
                    <div className="record_phase">无记录</div>
                    <div className="signin_operation">申请补勤</div>
                    <div className="signin_adress_info"></div>
                  </div>

                  <div className="record_info">
                    <div className="record_time">
                      <div className="specific_time">9:00</div>
                      <div className="date">04-24</div>
                    </div>
                    <div className="circular"></div>
                    <div className="record_type">上班</div>
                    <div className="record_phase type_normal">正常</div>
                    <div className="signin_operation">指纹打卡</div>
                    <div className="signin_adress_info">江苏省徐州市元龙区中国矿业大学南湖校区信息与控制学院</div>
                  </div>

                  
                  <div className="record_info">
                    <div className="record_time">
                      <div className="specific_time">9:00</div>
                      <div className="date">04-24</div>
                    </div>
                    <div className="circular"></div>
                    <div className="record_type">上班</div>
                    <div className="record_phase type_normal">正常</div>
                    <div className="signin_operation">指纹打卡</div>
                    <div className="signin_adress_info">江苏省徐州市元龙区中国矿业大学南湖校区信息与控制学院</div>
                  </div>
                </div>
              </div>
            </div>
            {/* 日签到 */}
            <div className="signin_days" style={{backgroundColor: '#fff' }}>
              {/* 头部 选择日期 */}
              <div className="signin_days_title">
                <div className="now_day">2020年5月16日</div>
                <div className="editdate">修改日期</div>
              </div>
              {/* 图表 一栏 */}
              <div className=" clearfix">
                <ReactEcharts
                  option={option}
                  style={{ width: "4.1333rem", height: "4.1333rem", marginTop: "-0.4rem",float:"left"}}
                />
                <div className="echarts_info">
                  <div className="normal_num">
                    <div className="shape" style={{background:"#6cb6ff"}}></div>
                    <span>正常</span>
                    <span className="num">(21人)</span>
                    <span className="percentage">72.4%</span>
                  </div>
                  <div className="late_num">
                    <div className="shape" style={{background:"#f9df71"}}></div>
                    <span>迟到</span>
                    <span className="num">(6人)</span>
                    <span className="percentage">20.7%</span>
                  </div>
                  <div className="leave_num">
                    <div className="shape" style={{background:"#f89ad8"}}></div>
                    <span>未到</span>
                    <span className="num">(2人)</span>
                    <span className="percentage">6.9%</span>
                  </div>
                  <div className="vacate_num">
                    <div className="shape" style={{background:"#a8a0f5"}}></div>
                    <span>请假</span>
                    <span className="num">(1人)</span>
                    <span className="percentage">3.5%</span>
                  </div>
                  <div className="overtime_num">
                    <div className="shape" style={{background:"#87db7d"}}></div>
                    <span>加班</span>
                    <span className="num">(4人)</span>
                    <span className="percentage">13.8%</span>
                  </div>
                </div>
                <div className="signin_statistical">
                  <p><span>27</span>/<span>30</span></p>
                  <div>实到/应到</div>
                </div>
              </div>
              {/* <br/> */}
              <div className="signin_percentage">
                <div className="signin_percentage_title">
                  <p>各部门出勤率</p> 
                  <span>应出勤29人</span>
                </div>
                <div className="detail_progress">
                  <div className="department_name">
                    总务处
                    <span style={{marginRight: "5.4667rem" ,marginLeft:"0.1067rem"}}>4/4人</span>
                    <span>100%</span>
                  </div>
                  <Progress percent={100} position="normal" unfilled={false} />

                  <div className="department_name">
                    教导处
                    <span style={{marginRight: "5.4667rem" ,marginLeft:"0.1067rem"}}>4/4人</span>
                    <span>100%</span>
                  </div>
                  <Progress percent={100} position="normal" unfilled={false} className="teach_box"/>

                  <div className="department_name">
                    科研室
                    <span style={{marginRight: "5.4667rem" ,marginLeft:"0.1067rem"}}>2/3人</span>
                    <span>66.6%</span>
                  </div>
                  <Progress className="scientific_box" percent={66.6} position="normal" unfilled={false} />

                  <div className="department_name">
                    大队部
                    <span style={{marginRight: "5.4667rem" ,marginLeft:"0.1067rem"}}>4/4人</span>
                    <span>100%</span>
                  </div>
                  <Progress className="brigade_box" percent={40} position="normal" unfilled={false} />

                  <div className="department_name">
                    党支部
                    <span style={{marginRight: "5.4667rem" ,marginLeft:"0.1067rem"}}>4/4人</span>
                    <span>100%</span>
                  </div>
                  <Progress className="party_box" percent={40} position="normal" unfilled={false} />

                  <div className="department_name">
                    教学部
                    <span style={{marginRight: "5.4667rem" ,marginLeft:"0.1067rem"}}>4/4人</span>
                    <span>100%</span>
                  </div>
                  <Progress className="education_box" percent={40} position="normal" unfilled={false} />
                </div>
                
                
              </div>
              
            </div>
            {/* 月签到 */}
            <div className="signin_month" style={{ backgroundColor: '#fff' }}>
              <div className="signin_month_title">
                <div>2020年5月</div>
              </div>
              <div className="statistical_data_box">
                <div className="statistical_data_wrap" >
                  <div className="item_box">
                    <div className="bg_wrap_box">
                      <div className="bg_box"></div>
                    </div>
                    <p>60</p>
                  </div>

                  <div className="item_box">
                    <div className="bg_wrap_box">
                      <div className="bg_box" style={{background:"#f89ad8",height: "0.6667rem"}}></div>
                    </div>
                    <p style={{color:"#f89ad8"}}>5</p>
                  </div>
                  <div className="item_box">
                    <div className="bg_wrap_box">
                      <div className="bg_box" style={{background:"#87db7d",height: '0'}}></div>
                    </div>
                    <p style={{color:"#87db7d"}}>0</p>
                  </div>
                  <div className="item_box">
                    <div className="bg_wrap_box">
                      <div className="bg_box" style={{background:"#32e2f2",height: "0.6667rem"}}></div>
                    </div>
                    <p style={{color:"#32e2f2"}}>5</p>
                  </div>
                  <div className="item_box">
                    <div className="bg_wrap_box">
                      <div className="bg_box" style={{background:"#f9df71",height: "0.6667rem"}}></div>
                    </div>
                    <p style={{color:"#f9df71"}}>5</p>
                  </div>
                  <div className="item_box">
                
                    <div className="bg_wrap_box">
                      <div className="bg_box" style={{background:"#a8a0f5",height: "0.2667rem"}}></div>
                    </div>
                    <p style={{color:"#a8a0f5"}}>2</p>
                  </div>
                </div>
                <div className="name">
                  <p>正常</p>
                  <p>迟到</p>
                  <p>早退</p>
                  <p>无记录</p>
                  <p>请假</p>
                  <p>加班</p>
                </div>
                <div className="Statistical_unit">
                  统计单位<span>(人次)</span>
                </div>
              </div>
              <div className="statistical_time_box">
                <div className="statistical_time_title">
                  <p>加班统计</p>
                  <span>应出勤29人</span>
                </div>
                <List  className="my-list">
                  <Item arrow="horizontal"  onClick={() => {}}>
                    <p>总务处</p>
                    <span>4小时</span>
                  </Item>
                  <Item arrow="horizontal"  onClick={() => {}}>
                    <p>教导处</p>
                    <span>4小时</span>
                  </Item>
                  <Item arrow="horizontal"  onClick={() => {}}>
                    <p>科研室</p>
                    <span>4小时</span>
                  </Item>
                  <Item arrow="horizontal"  onClick={() => {}}>
                    <p>大队部</p>
                    <span>4小时</span>
                  </Item>
                  <Item arrow="horizontal"  onClick={() => {}}>
                    <p>党支部</p>
                    <span>4小时</span>
                  </Item>
                  <Item arrow="horizontal"  onClick={() => {}}>
                    <p>教学部</p>
                    <span>4小时</span>
                  </Item>
                  <Item arrow="horizontal"  onClick={() => {}}>
                    <p>总务处</p>
                    <span>4小时</span>
                  </Item>
                </List>
              </div>
            </div>
          </Tabs>
        </div>
      </div>
    )
  }
}
